<template>
    <view>
        <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#DEB87C"></uni-segmented-control>
        <view class="content">
			<view v-show="current === 0">
				<view class="card"  v-for=" item in 10">
				    <view class="left">
						<view >
							<span class="tips">￥<span class="money">20</span></span>
							<view class="af">满减劵</view>
						</view>
					</view>
					<view class="right">
						<view class="top">
							<view class="juan">卷</view>
							满100减20优惠券
						</view>
						<view class="date">有效期至：2022-11-26</view>
						<view class="down">
							<view class="left-btn">满10元可用、限最新客户使用</view>
							<view class="right-btn">立即使用</view>
						</view>
					</view>
				</view>
			</view>
            <view v-show="current === 1">
                选项卡2的内容
            </view>
            <view v-show="current === 2">
                选项卡3的内容
            </view>
        </view>
    </view>
</template>
<script>
export default {
  data() {
    return {
        items: ['选项1', '选项2', '选项3'],
        current: 0
    };
  },
  
  methods: {
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
    }
  }
}
</script>
<style scoped lang="scss">
	.card{
		display: flex;
		padding: 37rpx;
		.right{
			padding-left: 20rpx;
			width: calc(100% - 180rpx);
			box-sizing: border-box;
			.down{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10rpx;
				.left-btn{
					border:1rpx solid #AB8852;
					border-radius: 8rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 18rpx;
					color: #AB8852;
					box-sizing: border-box;
					height: 38rpx;
					width: 300rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.right-btn{
					background-color: #E93828;
					border-radius: 50rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 27rpx;
					width: 134rpx;
					height: 55rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					box-sizing: border-box;
				}
			}
			.date{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 25rpx;
				color: #999999;
				line-height: 31rpx;
				margin-top: 23rpx;
			}
			.top{
				display: flex;
				align-items: center;
				margin-top: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 31rpx;
				color: #1A1A1A;
				.juan{
					margin-right: 13rpx;
					width: 36rpx;
					height: 36rpx;
					background: linear-gradient(135deg, #FD8E34 0%, #FBDC70 100%);
					border-radius: 8rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 23rpx;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.left{
			width: 180rpx;
			height: 180rpx;
			background-color: #C5B3A8;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			.tips{
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #624C4B;
				line-height: 21px;
			}
			.money{
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 57rpx;
				color: #624C4B;
				line-height: 21px;
			}
			.af{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #624C4B;
				line-height: 21px;
			}
		}
	}
</style>